<template>
  <!-- navbar -->
  <div class="top_navbar">
    <TitleNavbar>
      <template v-slot:left>
        <svg class="xiangzuo_icon icon" aria-hidden="true" @click="handleBack">
          <use xlink:href="#icon-xiangzuo"></use>
        </svg>
      </template>
      <template v-slot:center>
        <div class="record_time">
          <div class="title">剩余答题时间</div>
          <div class="time">
            <van-count-down :time="time" @finish="onFinish" />
          </div>
        </div>
      </template>
      <template v-slot:right>
        <div class="right_box">
          <div class="icon_box collect">
            <svg class="right_icon icon" aria-hidden="true" @click="handleBack">
              <use xlink:href="#icon-ego-favorite"></use>
            </svg>
            <span>收藏</span>
          </div>
          <div class="icon_box">
            <svg class="right_icon icon" aria-hidden="true" @click="handleBack">
              <use xlink:href="#icon-shezhi"></use>
            </svg>
            <span>设置</span>
          </div>
        </div>
      </template>
    </TitleNavbar>
  </div>
</template>

<script>
import TitleNavbar from "@/components/titleNavbar/index.vue";
import { useRouter } from "vue-router";
import { ref } from "@vue/reactivity";
export default {
  components: { TitleNavbar },
  setup() {
    const router = useRouter();
    // 返回上一页
    const handleBack = () => {
      router.back();
    };
    // 答题倒计时
    const time = ref(10 * 1000);
    const onFinish = () => {
      console.log("答题倒计时0");
    };
    return { time, handleBack, onFinish };
  },
};
</script>

<style lang="less" scoped>
.icon {
  width: 1.5rem;
  height: 1.5rem;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
.xiangzuo_icon {
  width: 1.8rem;
  height: 1.8rem;
}
.right_icon {
  color: #ff9800;
}
.title {
  font-size: 0.8rem;
}
.right_box {
  display: flex;
  align-items: center;
  .icon_box {
    display: flex;
    flex-direction: column;
    align-items: center;
    span {
      font-size: 0.7rem;
      color: #767676;
    }
  }
  .collect {
    margin: 0 0.5rem;
  }
}
.top_navbar {
  height: 3rem;
  width: 100%;
  position: fixed;
  z-index: 99;
  top: 0;
  left: 0;
  background-color: #fff;
}
</style>
